<template>
  <div class="webapp-layout">
    <!-- 移动端特有的顶部导航 -->
    <header v-if="showHeader" class="webapp-header">
      <div class="header-content">
        <van-icon 
          v-if="showBackButton" 
          name="arrow-left" 
          class="back-button" 
          @click="handleBack"
        />
        <h1 class="page-title">{{ pageTitle }}</h1>
        <div class="header-actions">
          <van-icon name="search" class="action-icon" />
          <van-icon name="chat-o" class="action-icon" />
        </div>
      </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="webapp-main">
      <slot />
    </main>

    <!-- 底部导航栏（仅在主要页面显示） -->
    <nav v-if="showTabBar" class="webapp-tabbar">
      <router-link 
        v-for="tab in tabs" 
        :key="tab.path" 
        :to="tab.path" 
        class="tab-item"
        :class="{ active: $route.path === tab.path }"
      >
        <van-icon :name="tab.icon" />
        <span>{{ tab.name }}</span>
      </router-link>
    </nav>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

// 标签页配置
const tabs = [
  { path: '/home', name: '发现', icon: 'home-o' },
  { path: '/events', name: '活动', icon: 'calendar-o' },
  { path: '/products', name: '商城', icon: 'shopping-cart-o' },
  { path: '/profile', name: '我的', icon: 'user-o' }
]

// 计算属性
const showHeader = computed(() => !route.meta.hideHeader)
const showTabBar = computed(() => !route.meta.hideTabBar)
const showBackButton = computed(() => route.meta.showBackButton !== false)
const pageTitle = computed(() => route.meta.title as string || '星聚')

// 返回按钮处理
const handleBack = () => {
  if (window.history.length > 1) {
    router.back()
  } else {
    router.push('/home')
  }
}
</script>

<style scoped>
.webapp-layout {
  min-height: 100vh;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.webapp-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  height: 44px;
}

.back-button {
  font-size: 18px;
  color: #333;
}

.page-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.action-icon {
  font-size: 18px;
  color: #666;
}

.webapp-main {
  flex: 1;
  overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom);
}

.webapp-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: white;
  border-top: 1px solid #eee;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 100;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  text-decoration: none;
  color: #666;
  font-size: 10px;
  gap: 4px;
}

.tab-item.active {
  color: #ff4d4f;
}

.tab-item i {
  font-size: 18px;
}
</style>